<template>
  <section class="pagemaker-form-page-inner">
    <div v-if="list.length == 0" class="empty">
      <div class="icon">
        <svg-icon icon-class="empty-icon" />
      </div>
    </div>
    <section v-else class="list">
      <div class="comps">
        <v-form ref="pageForm" :fields="list" @change="change" />
      </div>
    </section>
  </section>
</template>
<script>
import VForm from '@/components/CustomPage/form'
import { Switch, Color, UploadImage, Input, Slider, Select } from '@/components/CustomPage/fields/widget'
import { deepClone } from '@/utils'

export default {
  name: 'PagemakerForm',
  components: { VForm },
  inject: ['pageconfig'],
  data() {
    return {
      list: [
        {
          type: Switch,
          option: {
            label: '背景颜色是否渐变',
            name: 'isLinearGradBg',
            value: false,
            activetext: '是',
            inactivetext: '否',
            override: function(ths, e) {
              ths.$nextTick(() => {
                for (let i = 0; i < ths.$parent.$parent.$children.length; i++) {
                  const name = ths.$parent.$parent.$children[i].option.name
                  if (name === 'pageBgStartColor' || name === 'pageBgEndColor' || name === 'direction') {
                    ths.$parent.$parent.$children[i].visible = e
                  } else if (name === 'pagecolor' || name === 'pageimage') {
                    ths.$parent.$parent.$children[i].visible = !e
                  }
                }
              })
            }
          }
        },
        {
          type: Color,
          option: {
            label: '页面背景颜色',
            name: 'pagecolor',
            value: '#fff',
            showalpha: true
          }
        },
        {
          type: Color,
          option: {
            label: '页面背景起始颜色',
            name: 'pageBgStartColor',
            value: '#fff',
            showalpha: true
          }
        },
        {
          type: Color,
          option: {
            label: '页面背景终点颜色',
            name: 'pageBgEndColor',
            value: '#fff',
            showalpha: true
          }
        },
        {
          type: Select,
          option: {
            label: '渐变方向',
            name: 'direction',
            list: [
              { name: '从上到下', value: '180deg' },
              { name: '从下到上', value: '0deg' },
              { name: '从左到右', value: '90deg' },
              { name: '从右到左', value: '270deg' },
              { name: '从左下到右上', value: '45deg' },
              { name: '从右上到左下', value: '225deg' },
              { name: '从左上到右下', value: '135deg' },
              { name: '从右下到左上', value: '315deg' }
            ],
            value: '180deg'
          }
        },
        // { type: Input, option: { visible: false, label: '渐变背景', name: 'bgcolorLine', value: 'linear-gradient(#0ce8f8 0%, #c1fafc 100%)' }},
        {
          type: UploadImage,
          option: { visible: false, label: '页面背景图片', name: 'pageimage', value: '' }
        },
        {
          type: Switch,
          option: {
            // visible: false,
            label: '背景图随页面滚动',
            name: 'isFollow',
            value: true,
            activetext: '是',
            inactivetext: '否'
          }
        },
        {
          type: Slider,
          option: {
            label: '页面上边距',
            name: 'paddingTop',
            value: 0,
            max: 1000,
            step: 10
          }
        },
        {
          type: Slider,
          option: {
            label: '页面下边距',
            name: 'paddingBottom',
            value: 0,
            max: 500,
            step: 10
          }
        },
        {
          type: Switch,
          option: {
            label: '是否显示页头',
            name: 'header',
            value: false,
            activetext: '是',
            inactivetext: '否'
          }
        },
        {
          type: Switch,
          option: {
            label: '是否显示底部导航',
            name: 'footer',
            value: false,
            activetext: '是',
            inactivetext: '否'
          }
        }
      ]
    }
  },
  computed: {
    _pageconfig() {
      return this.pageconfig()
    }
  },
  watch: {
    _pageconfig: function(val) {
      this.$nextTick(() => {
        this.$refs.pageForm.setValue(val)
      })
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.on_event('clear-header', (e) => {
        this.list = deepClone(this.list)
      })
    },
    change() {
      this.$refs.pageForm.getValue().then((r) => {
        this.dispatch_event('page-form-change', r)
      })
    }

  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/position.scss';
@import '@/styles/utility/center.scss';

.pagemaker-form-page-inner {
  @include absolute();
  overflow: auto;

  .empty {
    line-height: 80px;
    @include center();
    padding: 20px 0 20px 0;
    pointer-events: none;
    color: $f3;

    .icon {
      height: 50px;
      width: 50px;
      font-size: 30px;
      background: $f8;
      border-radius: 50%;
      border: 1px solid $f6;
      @include center();
    }
  }

  .list {
    .sort {
      line-height: 35px;
      padding: 0 15px 0 15px;
      font-size: 12px;
      background: $f8;
      border-bottom: 1px solid $f6;
      position: sticky;
      z-index: 9;
      top: 0;
      color: $a1;
    }

    .comps {
      border-bottom: 1px solid $f6;
      padding: 15px;

      .inner {
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
